<template>
    <div>
        <div class="info" @click="showHome">
            <div class="info-left">
                <svg
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        fill="#333333"
                        d="M938.666667 454.101333c0 201.621333-186.432 364.202667-416.938667 368.661334-9.130667 10.346667-11.733333 13.226667-16.213333 17.898666-1.493333 1.578667-1.493333 1.578667-3.029334 3.136-7.552 7.68-15.253333 14.741333-35.456 32.597334-54.272 41.322667-130.837333 62.165333-186.602666 62.272a21.333333 21.333333 0 0 1-14.378667-5.546667 22.485333 22.485333 0 0 1-6.741333-22.592c0.810667-3.413333 2.197333-6.293333 4.053333-9.28 2.026667-3.242667 4.629333-6.570667 8.874667-11.605333 1.109333-1.322667 8.682667-10.197333 11.093333-13.077334 4.672-5.589333 8.64-10.56 12.416-15.594666 23.253333-31.146667 33.216-58.474667 26.666667-83.52a21.333333 21.333333 0 1 1 41.28-10.794667c10.602667 40.597333-3.52 79.36-33.770667 119.850667-1.173333 1.578667-2.368 3.136-3.584 4.693333 39.104-7.509333 82.026667-23.744 113.6-47.722667 18.282667-16.213333 25.472-22.826667 32.128-29.610666l2.602667-2.666667c4.757333-4.992 7.36-7.893333 21.333333-23.765333a21.333333 21.333333 0 0 1 16-7.253334c212.736 0 384-146.773333 384-326.08C896 274.773333 724.736 128 512 128S128 274.773333 128 454.101333c0 86.933333 40.32 168.661333 111.274667 229.461334a21.333333 21.333333 0 1 1-27.776 32.405333C131.413333 647.296 85.333333 553.941333 85.333333 454.101333 85.333333 249.642667 277.034667 85.333333 512 85.333333s426.666667 164.309333 426.666667 368.768zM341.333333 384c0-11.776 9.493333-21.333333 21.333334-21.333333h298.666666c11.776 0 21.333333 9.472 21.333334 21.333333 0 11.776-9.493333 21.333333-21.333334 21.333333H362.666667c-11.776 0-21.333333-9.472-21.333334-21.333333z m0 128c0-11.776 9.728-21.333333 21.376-21.333333h213.248a21.312 21.312 0 1 1 0 42.666666h-213.248A21.312 21.312 0 0 1 341.333333 512z"
                    />
                </svg>
                <p>消息</p>
            </div>
            <div class="info-right">
                <svg
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                        fill="#333333"
                        d="M360.96 839.68c-6.656 0-13.312-2.56-17.92-7.68-10.24-10.24-10.24-26.112 0-36.352l284.16-284.16L343.04 227.84c-10.24-10.24-10.24-26.112 0-36.352s26.112-10.24 36.352 0l302.08 302.08c10.24 10.24 10.24 26.112 0 36.352l-302.08 302.08c-5.12 5.12-11.776 7.68-18.432 7.68z"
                    />
                </svg>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "App",
    methods: {
        showHome() {
            this.$router.push({ path: "/home" });
        },
    },
    mounted() {},
    created() {},
};
</script>
<style lang="less" scoped>
.info {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 32px 44px;
    .info-left {
        display: flex;
        align-items: center;

        .icon {
            width: 36px;
            height: 36px;
        }
        p {
            font-size: 28px;
            margin-left: 20px;
        }
    }
    .info-right {
        display: flex;
        align-items: center;
        .icon {
            width: 36px;
            height: 36px;
        }
    }
}
</style>
